<template>
    <form @submit="() => { return false; }" class="work">
        <div class="left-con" @scroll="onScroll">
            <div class="first-scroll" v-if="isFirstScroll">
                <span class="scroll-tip-text"></span>
                <span class="scroll-tip-icon"></span>
            </div>
            <div class="dx-video-datas" v-if="info.videoUrl.length>0">
                <div class="dx-vd-item" v-for="(v, idx) in info.videoUrl" :key="idx">
                    <a v-if="v.type == 'sys'">
                        <img loading="lazy" :src="v.url + '?x-oss-process=video/snapshot,t_0,f_jpg,w_0,h_0,m_fast,ar_auto'" alt="" @error="loadVideoError">
                        <span class="play-icon"
                            @click="isthird = false; currentItem = { image: v.url + '?x-oss-process=video/snapshot,t_0,f_jpg,w_0,h_0,m_fast,ar_auto', videoList: [{ content: v.url }] }; showPlay = true;"></span>
                    </a>
                    <a v-else class="third-play">
                        <iframe style="width:100%;height:100%;" :src='v.url' frameborder=0 allowfullscreen></iframe>
                        <span class="play-icon"
                            @click="isthird = true; currentItem = { url: v.oldUrl }; showPlay = true;"></span>
                    </a>
                </div>
            </div>
            <div class="imgs">
                <div class="img-wrap" v-for="(url, idx) in info.imagesBean.imageList" :key="idx">
                    <div class="uimg" :class="{ 'no-mx-w': showPage }">
                        <img loading="lazy" :src="url.bigUrl" alt="" @click="showImgBy(idx,url.bigUrl)">
                        <div class="top-funs">
                            <a class="full-screen" @click="searchByImg(url.bigUrl)"></a>
                            <a class="refresh" @click="handleRefresh"></a>
                            <a class="download" @click="downloadImg(url.bigUrl)"></a>
                        </div>
                    </div>
                </div>
            </div>
            <template v-if="!showPage">
                <a class="page-prev" @click="handlePrev"></a>
                <a class="page-next" @click="handleNext"></a>
            </template>
        </div>
        <div class="right-con-box" @scroll="onRightScroll">
            <div class="user">
                <div class="left">
                    <a :href="'/user/' + info.member.id" target="_blank" class="img-box">
                        <img loading="lazy" v-aimgd="{ avatar: info.member.avatar, id: info.member.id, w: 50, name: info.member.userName }">
                    </a>
                </div>
                <div class="basic">
                    <div class="top">
                        <a class="name" :href="'/user/' + info.member.id" target="_blank">{{ info.member.userName }}
                            
                            <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover"  v-for="tag in info.member.tagsList">
                            <i class="sm-tip" slot-content>{{tag.title}}</i>
                            <img slot="reference" loading="lazy" class="u-m-tag" :src="tag.image" alt="">
                            </el-popover>
                        </a>
                        <a class="follow" :class="{ 'active': info.isSubscribe > 0 }" @click="handleFollow">
                            {{ info.isSubscribe > 0 ? '关注中' : '关注' }}
                        </a>
                    </div>
                    <div class="desc" :title="info.member.subhead">{{ info.member.subhead ? info.member.subhead :
                        '欢迎来到我的GAMEUI设计个人主页' }}</div>
                </div>
            </div>
            <div class="btn-row">
                <a class="zan-btn" :class="{ 'active': info.praiseCount > 0 }" @click="handlePraiseArticle">喜欢</a>
                <a class="add-to-collect" @click="handleShowFav">添加到收藏夹</a>
            </div>
            <div class="title">
                <!-- <div>{{ info.title }}<img loading="lazy" class="tg-img" v-for="(t, tdx) in info.tagsList" :key="tdx" :title="t.title" v-if="t.image" :src="t.image" alt="" /></div>   -->
                <div>{{ info.title }}<img loading="lazy" class="pro-title-tag" v-for="(t, tdx) in info.tagsList" :key="tdx" :title="t.title" v-if="t.image"
                    :src="t.image" alt="" /></div>
            </div>
            <div class="tags">
                <a class="tag" v-for="(tag, tdx) in info.tagsArray" :href="'/searchs?k=' + tag + '&t='" target="_blank"
                    :key="tdx">{{ tag }}</a>
            </div>
            <div class="sub-desc" v-html="info.content" id="sub_desc" :class="{'show-more':showMoreDesc,'is-mutiple':showmorebtn}">
            </div>
            <a class="sub-desc-more" :class="{'collapse':showMoreDesc}" @click="showMoreDesc=!showMoreDesc" v-if="showmorebtn">显示{{!showMoreDesc?'更多':'较少'}}</a>
            <div class="publish-time">{{ info.createTime ? info.createTime.split(' ')[0] : '' }}发布<span class="see-str">{{ info.seeStr }}浏览</span></div>
            <div class="ico-btns">
                <el-popover popper-class="gm-info-pop" placement="top" trigger="hover">
                    <i class="sm-tip" slot-content>发表评论</i>
                    <a slot="reference" class="comment" @click="handleSendFocus">{{ info.commentNumStr }}</a>
                </el-popover>
                <el-popover popper-class="gm-info-pop" placement="top" trigger="hover">
                    <i class="sm-tip" slot-content>添加到收藏夹</i>
                    <a slot="reference" class="fav" :class="{ 'active': info.collectCount > 0 }" @click="handleShowFav">{{
                        info.collectNumStr }}</a>
                </el-popover>
                <el-popover popper-class="gm-info-pop" placement="top" trigger="hover">
                    <i class="sm-tip" slot-content>喜欢此内容</i>
                    <a slot="reference" class="zan" :class="{ 'active': info.praiseCount > 0 }" @click="handlePraiseArticle">{{
                    info.praiseStr }}</a>
                </el-popover>
            </div>
            <div class="comment-area">
                <div class="tabs">
                    <span :class="[activeTab == 0 ? 'active' : '']" @click="activeTab = 0">评论</span>
                    <span :class="[activeTab == 1 ? 'active' : '']" @click="activeTab = 1">相关作品</span>
                </div>
                <div class="comments" v-if="activeTab == 0">
                    <div class="comment-data-item" v-for="(item, idx) in comments" :key="idx">
                        <a class="uavatar" :href="'/user/' + item.member.id" target="_blank">
                            <img loading="lazy"
                                v-aimgd="{ avatar: item.member.avatar, id: item.member.id, w: 34, name: item.member.userName }" />
                        </a>
                        <div class="r-con">
                            <a class="name" :href="'/user/' + item.member.id" target="_blank">{{ item.member.userName
                                }}</a>
                            <div class="con-html" v-html="item.content"></div>
                            <div class="bot">
                                <span class="time">{{ item.intervalTimeStr }}</span>
                                <div class="funs">
                                    <a class="del" @click="parentItem = {}; currentCmtIdx = idx; showDel = true;"
                                        v-if="loginUid == item.member.id"></a>
                                    <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover">
                                    <i class="sm-tip" slot-content>回复</i>
                                    <a slot="reference" class="reply" @click="isLevelTwo = false; replyTa(item)">{{
                                        item.commentList.length
                                        }}</a>
                                    </el-popover>
                                    <a class="cmt-zan" :class="{ 'active': item.praiseCount > 0 }"
                                        @click="(e)=>{handleAddPraiseComment(item,e)}">{{
                                            item.praise }}</a>
                                </div>
                            </div>

                            <div class="sub-wrap">
                                <div class="comment-data-item" v-for="(sub, sdx) in item.commentList" :key="sdx"
                                    v-if="sdx < 3 || item.showallcmt">
                                    <a class="uavatar" :href="'/user/' + sub.member.id" target="_blank">
                                        <img loading="lazy"
                                            v-aimgd="{ avatar: sub.member.avatar, id: sub.member.id, w: 34, name: sub.member.userName }" />
                                    </a>
                                    <div class="r-con">
                                        <a class="name" :href="'/user/' + sub.member.id" target="_blank">{{
                                            sub.member.userName }}
                                            <i>回复</i> {{ sub.parentName }}</a>
                                        <div class="con-html" v-html="sub.content"></div>
                                        <div class="bot">
                                            <span class="time">{{ sub.intervalTimeStr }}</span>
                                            <div class="funs">
                                                <a class="del"
                                                    @click="parentItem = item; currentCmtIdx = sdx; showDel = true;"
                                                    v-if="loginUid == sub.member.id"></a>

                                                    <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover">
                                                        <i class="sm-tip" slot-content>回复</i>
                                                        <a slot="reference" class="reply"
                                                                    @click="isLevelTwo = true; parentIdx = idx; replyTa(sub)">0</a>
                                                    </el-popover>
                                                <a class="cmt-zan" :class="{ 'active': sub.praiseCount > 0 }"
                                                    @click="(e)=>{handleAddPraiseComment(sub,e)}">{{ sub.praise }}</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="view-all" v-if="item.commentList.length > 3 && !item.showallcmt">
                                    <a class="btn" @click="item.showallcmt = true; $forceUpdate();">显示
                                        {{ item.commentList.length }}
                                        条所有评论</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <Empty class="comment-empty" text="等待你的精彩点评～" v-if="comments.length==0&&!isloading"/>
                    <div class="no-more-text" v-if="!hasMore&&!isloading&&comments.length>0">没有更多了~</div>
                </div>
                <div class="recommends" v-if="activeTab == 1">
                    <a v-for="(item, idx) in recommends" :key="idx" :href="'/work/' + item.id" target="_blank">
                        <div class="img-flex-box">
                            <img loading="lazy" v-imgd="{ id: item.id, w: 312, uptime: item.updateTime }" alt="">
                            <span>{{ item.title }}</span>
                        </div>
                    </a>
                    <Empty text="空空如也～" v-if="recommends.length==0&&!isloading"/>
                </div>
                <div class="send-mbox">
                    <span class="u-img">
                        <img loading="lazy"
                            v-aimgd="{ avatar: currentUser.avatar, id: currentUser.id, w: 86, name: currentUser.userName }" />
                    </span>
                    <div class="right">
                        <!-- <textarea type="text" id="topcmtval" v-model="topcmtVal" placeholder="发布你的评论"></textarea> -->
                        <el-input type="textarea" id="topcmtval" class="sender-txt" :class="{'isp-pd':isTxtAreaPd,'is-fnew':showFnew}" v-model="topcmtVal" @input="checkRows"
                            :placeholder="replyItem && replyItem.id ? '回复  @' + replyItem.member.userName : '说点什么吧...'"
                            autosize></el-input>
                        <div class="opbtns">
                            <!-- <a class="face-btn"></a> -->
                            <Face txtId="topcmtval" mod="topsend" @change="(val) => { topcmtVal = val; }" />
                            
                            <el-popover popper-class="gm-info-pop" placement="top" trigger="hover">
                                <i class="sm-tip" slot-content>按Ctrl + Enter 键发送</i>
                                <a slot="reference" class="send-btn" @click="handleTopSend"></a>
                            </el-popover>
                        </div>
                    </div>
                    <div class="game-n-u-visit work-p" v-if="showFnew">
                        <div class="nv-content">
                            <div class="nv-content-l">
                                <span>「点这里，说说你的想法」</span>
                                <span>参与讨论，交流观点</span>
                            </div>
                            <a class="n-u-v-close" @click="handlCloseTop"></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <imgView v-if="showImg" @close="showImg = false" />

        <a-modal v-model="showFav" destroyOnClose centered :footer="null" :closable="false" width="471px">
            <Fav favmodule="WORK" @close="showFav = false" :foldertype="1" :articleid="info.id" @favsucc="onFavSucc" />
        </a-modal>

        <ViewImg :url="curImgUrl" v-if="showViewImg" @close="onImgClose"  @changepage="changePage"/>

        <a-modal v-model="showDel" destroyOnClose centered :footer="null" :closable="false" width="366px">
            <div class="fav-component">
                <div class="fav-header">
                    系统提示
                </div>
                <div class="folder-con" style="margin-top:30px;text-align:center;font-size:14px;">
                    确定要删除？
                </div>
                <div class="btns m-widbtns">
                    <a class="pro-default-btn" @click="showDel = false">取消</a>
                    <a class="pro-confirm-btn" @click="handleConfirmDel">确认</a>
                </div>
            </div>
        </a-modal>


        <PlayVideo v-if="showPlay" :isthird="isthird" :data="currentItem" @close="showPlay = false"
            :ismustoverflow="true" />
    </form>
</template>

<script>
import Empty from '@/components/Empty'
import PlayVideo from '@/components/playvideo'
import moment from 'moment'
import JSZip from 'jszip';
import ViewImg from '@/components/viewImg'
import Face from '@/components/face'
import Fav from '@/components/Fav'
import SparkMD5 from 'spark-md5'
import api from '@/api/api'
import ImgView from './img.vue'
export default {
    components: { ImgView, Fav, Face, ViewImg, PlayVideo,Empty },
    data() {
        return {
            showIdx:0,
            showmorebtn:false,
            showMoreDesc:false,
            showFnew:false,
            isFirstScroll:false,
            isTxtAreaPd:false,
            isloading:true,
            showPlay: false,
            currentItem: {},
            parentIdx: -1,
            isLevelTwo: false,
            loginUid: '',
            currentCmtIdx: '',
            parentItem: null,
            showDel: false,
            showPage: false,
            curImgUrl: '',
            showViewImg: false,
            replyItem: null,
            showFav: false,
            activeTab: 0,
            topcmtVal: '',
            currentUser: {},
            defaultAvatar: require('../../assets/pro/default_uimg.svg'),
            info: {
                imageDetailList: [],
                imageList: [],
                imagesBean: {
                    imageList: []
                },
                videoUrl: [],
                member: {
                    tagsList: []
                },
                tagsArray: []
            },
            recommends: [],
            comments: [],
            commentParams: {
                pageNum: 1,
                pageSize: 10,
                parentId: 0,
                commentId: '',
                orderByColumn: 'createTime',
                isAsc: 'desc'
            },
            fullScPraiseParam:{
                isAnimating:false,
                lastTime:0,
                CONFIG:{
                particleCount: {
                    mobile: 15,
                    tablet: 20, 
                    desktop: 25
                },
                cooldown: 1500
                }
            },
            scrollLoaded: false,
            hasMore: true,
            showImg: false
        }
    },
    props: ['id'],
    methods: {
        onImgClose(){
            this.showViewImg = false;
            document.body.style.overflow='inherit';
        },
        changePage(_dir) {
            if (_dir == 'prev') {
                if(this.showIdx==0){
                    this.$amessage.warn('没有更多了~')
                    return;
                }
                this.showIdx--;
            } else {
                if(this.showIdx==this.info.imagesBean.imageList.length-1){
                    this.$amessage.warn('没有更多了~')
                    return;
                }
                this.showIdx++;
            }
            
            this.curImgUrl = this.info.imagesBean.imageList[this.showIdx].bigUrl;
        },
        loadVideoError(e){
            e.target.parentNode.parentNode.remove();
        },
        handlCloseTop(){
           if(this.showFnew){
            this.showFnew=false;
            localStorage.setItem('WORK-NYD',false);
           }
        },
        onScroll(){
            if(this.isFirstScroll){
                localStorage.setItem('IS-F-WORK-SCROLL',false);
                this.isFirstScroll=false;
            }
        },
        handleShowFav(){
            let ckPass=this.$bhelper.checkLogin(this);
            if(!ckPass)return;
            this.showFav=true;
        },
        checkRows(val){
            if(val.indexOf('\n')>-1||val.trim().length>15){
                this.isTxtAreaPd=true;
            }else{
                this.isTxtAreaPd=false;
            }
        },
        handleSendFocus(){
            $('#topcmtval').focus();
        },
        async handleConfirmDel() {
            let id = this.parentItem.id ? this.parentItem.commentList[this.currentCmtIdx].id : this.comments[this.currentCmtIdx].id;
            let res = await api.delComment(id);
            if (res.code == 0) {
                if (this.parentItem.id) {
                    this.parentItem.commentList.splice(this.currentCmtIdx, 1);
                } else {
                    this.comments.splice(this.currentCmtIdx, 1);
                }
                this.$amessage.success('删除成功');
                this.showDel = false;
            }
        },
        replyTa(item) {
            this.parentItem = item;
            this.replyItem = item;
            $('#topcmtval').focus();
        },
        //创建画布，将图片渲染到画布上，再将画布转为base64格式数据返回出来
        getBase64Image(img, width, height) {
            var canvas = document.createElement('canvas')
            canvas.width = width ? width : img.width
            canvas.height = height ? height : img.height
            var ctx = canvas.getContext('2d')
            ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
            var dataURL = canvas.toDataURL()
            return dataURL
        },
        //传入图片地址，返回base64格式数据
        getBase64(img) {
            var image = new Image()
            image.crossOrigin = '*' //解决图片跨域问题
            image.src = img
            return new Promise((resolve, reject) => {
                image.onload = () => {
                    resolve(this.getBase64Image(image))
                }
            })
        },
        downloadImg(url) {
            let that=this;
            var zip = new JSZip()
            let folerName = moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
            var imgFolder = zip.folder(folerName)
            this.getBase64(url).then((base64) => {
                //调用getBase64()方法,传入图片网络地址得到base64数据
                base64 = base64.split('base64,')[1]
                imgFolder.file(url.substring(url.lastIndexOf('/') + 1), base64, { base64: true }) //自定义图片名字，存进images文件夹里面
                zip.generateAsync({ type: 'blob' }).then((blob) => {
                    saveAs(blob, folerName + '.zip') //自定义文件压缩包名字
                    that.$amessage.success('下载完成')
                })
            })
        },
        searchByImg(url) {
            let that = this;
            //方法二
            let canvas = document.createElement('canvas');
            let img = document.createElement('img');
            // 解决跨域 Canvas 污染问题

            img.setAttribute("crossOrigin", '*');

            // that.isSearching = true;

            // that.isFocus = false;
            img.onload = function (e) {
                canvas.width = img.width;
                canvas.height = img.height;
                let context = canvas.getContext('2d');
                //绘制图片
                context.drawImage(img, 0, 0, img.width, img.height);
                canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);

                const base64 = canvas.toDataURL('image/jpeg')
                localStorage.setItem('tmp_im_b64', base64);
                that.isFocus = false;
                if (that.$route.name == 'searchByImageList') {
                    location.href = '/searchByImageList?t=' + Date.parse(new Date())
                } else {
                    let routeData = that.$router.resolve({ path: '/searchByImageList?t=' + Date.parse(new Date()) })
                    window.open(routeData.href, '_blank');
                }
                return;
            }
            //将资源链接赋值过去，才能触发img.onload事件
            img.src = url;
        },
        handleRefresh(e) {
            let elimg = $(e.target).parents('.uimg').find('img');
            let oldSrc = elimg.get(0).src;
            $(elimg.get(0)).attr('src', '');
            setTimeout(() => {
                $(elimg.get(0)).attr('src', oldSrc)
            }, 300)
        },
        onFavSucc() {
            this.showFav = false;
        },
        showImgBy(idx,_url) {
            this.showIdx=idx;
            this.curImgUrl = _url;
            this.showViewImg = true;
            document.body.style.overflow='hidden';
        },
        async handleTopSend() {
            let ckPass=this.$bhelper.checkLogin(this);
            if(!ckPass)return;
            if (!this.topcmtVal) {
                $('#topcmtval').focus();
                this.$amessage.warn('请输入评论内容~');
                return;
            }
            this.handlCloseTop();
            let params = { type: 0, commentId: this.id, content: this.topcmtVal };
            if (this.replyItem) {
                params.parentId = this.replyItem.id;
            }
            let res = await api.addComment(params);
            if (res.code == 0) {
                res.data.member = JSON.parse(decodeURIComponent(localStorage.getItem('BSIC')));
                res.data.content = this.$bhelper.replace_em(res.data.content);
                
                res.data.commentList=[];
                if (this.replyItem) {
                    res.data.parentName = this.replyItem.member.userName;
                    if (this.isLevelTwo) {
                        this.comments[this.parentIdx].commentList = [...[res.data], ...this.comments[this.parentIdx].commentList];
                    } else {
                        this.parentItem.commentList = [...[res.data], ...this.parentItem.commentList];
                    }
                    this.replyItem = {};
                    this.$amessage.success('回复已送达，继续畅聊吧～')
                } else {
                    this.$amessage.success('你的神评论已发射！')
                    this.comments = [res.data].concat(this.comments);
                }
                this.topcmtVal = '';
            }
        },
        createPlusOne(likeContainer) {
            const plus = document.createElement('div');
            plus.className = 'plus-one';
            plus.innerHTML = '<span style="color: #ffffff;">+</span><span style="color: #ffffff;">1</span>';
            plus.style.left = '50%';
            plus.style.top = '50%';
            plus.style.animation = 'floatUp 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards';

            likeContainer.appendChild(plus);
            setTimeout(() => plus.remove(), 1000);
        },
        async handlePraiseArticle(e) {
            
            let ckPass=this.$bhelper.checkLogin(this);
            if(!ckPass)return;
            if (this.info.praiseCount > 0) {
                let res = await api.delPraise({ type: 0, praiseId: this.id });
                if (res.code == 0) {
                    this.info.praiseCount = 0;
                    this.info.praise--;
                    this.$amessage.success('取消喜欢~')
                }
            } else {
                let res = await api.addPraise({ type: 0, praiseId: this.id });
                if (res.code == 0) {
                    this.createHearts(e.target);
                    this.createPlusOne(e.target);
                    this.$bhelper.addCirRecord('FAV');
                    this.$bhelper.addCirRecord('FAV-WORK');
                    this.$store.dispatch('setLeftMenu',[])
                    this.info.praise++;
                    this.info.praiseCount = 1;
                    this.$amessage.success('已喜欢，品味不错哦～')
                }
            }
        },
        getRandomNumber(min, max) {
            return Math.random() * (max - min) + min;
        },
        getParticleCount() {
            const width = window.innerWidth;
            if (width <= 480) return this.fullScPraiseParam.CONFIG.particleCount.mobile;
            if (width <= 768) return this.fullScPraiseParam.CONFIG.particleCount.tablet;
            return this.fullScPraiseParam.CONFIG.particleCount.desktop;
        },
        createHearts(e) {
            const confettiContainer = document.createElement('div');
            confettiContainer.className = 'confetti-container';

            let _parent=document.querySelector('.work');
            _parent.appendChild(confettiContainer);

            const now = Date.now();
            if (this.fullScPraiseParam.isAnimating || now - this.fullScPraiseParam.lastTime < this.fullScPraiseParam.CONFIG.cooldown) return;
            
            this.fullScPraiseParam.isAnimating = true;
            this.fullScPraiseParam.lastTime = now;

            // showToast();

            // const btn =e.target;
            let that=this;
            // btn.style.animation = 'btn-success 0.5s ease';
            // setTimeout(() => btn.style.animation = '', 500);

            const particleCount = this.getParticleCount();
            const viewportWidth = window.innerWidth;
            const spacing = viewportWidth / particleCount;

            const fragment = document.createDocumentFragment();
            let activeParticles = particleCount;

            for(let i = 0; i < particleCount; i++) {
                const heart = document.createElement('div');
                heart.className = 'heart';
                heart.textContent = '❤';
                
                const xPos = i * spacing + this.getRandomNumber(-20, 20);
                heart.style.left = `${xPos}px`;
                
                const duration = this.getRandomNumber(2, 3);
                heart.style.animationDuration = `${duration}s`;

                heart.addEventListener('animationend', () => {
                    heart.remove();
                    if (--activeParticles === 0) {
                        that.fullScPraiseParam.isAnimating = false;
                    }
                }, { once: true });

                fragment.appendChild(heart);
            }

            confettiContainer.appendChild(fragment);
        },
        onRightScroll(e) {
            const { scrollTop, scrollHeight, clientHeight } = e.target
            if (scrollTop + clientHeight >= scrollHeight - 100) {
                if (this.scrollLoaded && this.hasMore) {
                    this.scrollLoaded = false;
                    this.commentParams.pageNum++;
                    this.queryComments();
                }
            }
        },
        async handleAddPraiseComment(item,e) {
            if (item.praiseCount > 0) {
                let res = await api.delPraise({ type: 1, praiseId: item.id });
                if (res.code == 0) {
                    item.praise--;
                    item.praiseCount=0;
                    this.$amessage.success('取消喜欢~')
                }
            }
            else {
                let res = await api.addPraise({ type: 1, praiseId: item.id });
                if (res.code == 0) {
                    this.createPlusOne(e.target);
                    item.praise++;
                    item.praiseCount=1;
                    this.$amessage.success('已送出喜欢！也觉得说得很对')
                }
            }
        },
        handlePrev() {
            debugger
            this.$emit('prev')
        },
        handleNext() {
            debugger
            this.$emit('next')
        },
        async queryComments() {
            let that = this;
            this.isloading=true;
            let res = await api.getComments(this.commentParams);
            this.isloading=false;
            let list = res.data;
            list.forEach((l) => {
                l.content = that.$bhelper.replace_em(l.content);
                l.showSubMore = false;
                l.showReply = false;
                l.replayModel = {
                    content: ''
                };
                if (l.commentList && l.commentList.length > 0) {
                    l.commentList.forEach(s => {
                        s.content = that.$bhelper.replace_em(s.content);
                        s.showReply = false;
                        s.replayModel = {
                            content: ''
                        };
                    })
                }
            })
            this.comments = [...this.comments, ...list];

            let totalPage = res.total % that.commentParams.pageSize == 0 ? res.total / that.commentParams.pageSize : parseInt(res.total / that.commentParams.pageSize) + 1
            if ((list.length < that.commentParams.pageSize || that.commentParams.pageNum >= totalPage)||list.length<that.commentParams.pageSize) {
                that.hasMore = false
            } else {
                that.hasMore = true
            }

            this.scrollLoaded = true;

            //   if(that.comments.length>4){
            //     if(that.commentTimer)
            //       clearInterval(that.commentTimer);
            //     that.startCommentMarquee();
            //     $('#marquee_comments').hover(function(){
            //       if(that.commentTimer)
            //         clearInterval(that.commentTimer);
            //     },function(){
            //         that.startCommentMarquee();
            //     })
            //   }
        },
        nearHisAdd() {
            let nearHisResults = localStorage.getItem('NEARBROWSERRESULT')
            if (!nearHisResults) nearHisResults = []
            else {
                nearHisResults = JSON.parse(nearHisResults)
            }
            let that = this
            let has = nearHisResults.filter((r) => {
                return r.id == that.info.id
            })
            if (nearHisResults.length >= 8) nearHisResults = nearHisResults.splice(1, 8)
            if (has.length == 0) {
                nearHisResults.push({ type: 3,pageurl:'/work/'+that.info.id, id: that.info.id, picurl: that.info.image, title: that.info.title })
            }
            localStorage.setItem('NEARBROWSERRESULT', JSON.stringify(nearHisResults))
        },
        async queryInfo() {
            let res = await api.getArticleById(this.id);

            if (res.data.videoUrl) {
                let urls = res.data.videoUrl.split(',');
                res.data.videoUrl = [];
                urls.forEach(url => {
                    if (url.indexOf('v.qq.com') > -1) {
                        let _vId = url.substring(url.lastIndexOf('/') + 1).replace('.html', '');
                        // res.data.videoUrl.push({type:'txv',url:'https://v.qq.com/txp/iframe/player.html?vid='+_vId})
                        res.data.videoUrl.push({ type: 'txv', oldUrl: url, url: url + '&autoplay=0' })
                    } else if (url.indexOf('bilibili.com') > -1) {
                        let _bId = url.split('=')[1];
                        // res.data.videoUrl.push({type:'bilibili',url:'https://player.bilibili.com/player.html?bvid='+_bId})
                        res.data.videoUrl.push({ type: 'bilibili', oldUrl: url, url: url + '&autoplay=0' })
                    } else if (url.indexOf('youku.com') > -1) {
                        let _embedVal = url.substring(url.lastIndexOf('_') + 1);
                        _embedVal = _embedVal.substring(0, _embedVal.indexOf('.html'));
                        // res.data.videoUrl.push({type:'youku',url:'https://player.youku.com/embed/'+_embedVal})
                        res.data.videoUrl.push({ type: 'youku', oldUrl: url, url: url + '&autoplay=0' })
                    } else {
                        res.data.videoUrl.push({ type: 'sys', url: url })
                    }
                })
            }
            if(res.data.content){
                let oldContent=res.data.content.replace(/<[^>]*>|&nbsp;/g,'').replace('<br/>','');
                if(oldContent.length>150){
                    this.showmorebtn=true;
                }
            }
            this.info = res.data;
            this.nearHisAdd();
            if (localStorage.getItem('token')) {
                this.$bhelper.add(this.info, 'work');
                this.$bhelper.addCirRecord('BROWSE');
                this.$store.dispatch('setLeftMenu',[])
            }
            res = await api.getRecommends({ id: this.id, pageNum: 1, pageSize: 10, categoryId: this.info.topCategory.id });
            this.recommends = res.data;

            
        
            this.commentParams.commentId = this.id;
            this.queryComments();
        },
        onImgError(e) {
            e.target.src = require('../../assets/pro/default_uimg.svg');
        },
        async handleFollow() {
            let ckPass=this.$bhelper.checkLogin(this);
            if(!ckPass)return;
            if (this.info.isSubscribe > 0) {
                let res = await api.cancelFollowTo(this.info.member.id);
                if (res.code == 0) {
                    this.info.isSubscribe = 0;
                    this.$amessage.success('已取消，有缘再见～')
                }
            }
            else {
                let res = await api.followTo(this.info.member.id);
                if (res.code == 0) {
                    this.$bhelper.addCirRecord('FOLLOW');
                    this.$store.dispatch('setLeftMenu',[])
                    this.info.isSubscribe = 1;
                    this.$amessage.success('关注+1，灵感不断！')
                }
            }
        },
        handleTop() {
            $('.game-con-info').animate(
                {
                    scrollTop: 0,
                },
                100
            )
        },
        version(time) {
            let date = new Date(time)
            return date.getTime()
        },
        get_avatar_url(member = { id: '', avatar: '' }, n = 1, w = 30) {
            if (!member.id || !member.avatar) return this.defaultAvatar
            let hash = SparkMD5.hash(member.avatar).slice(0, 6)
            return `https://img.gameui.net/avatar-${member.id}-${hash}@${n}x${w}.webp`
        },
        get_avatar_urls(member = { id: '', avatar: '' }, w = 30) {
            return `${this.get_avatar_url(member, 1, w)} 1x, ${this.get_avatar_url(member, 2, w)} 2x, ${this.get_avatar_url(member, 3, w)} 3x`
        },
        handleClose() {
            this.$emit('close')
        }
    },
    watch: {
        id(newVal) {
            this.id = newVal;
            this.queryInfo();
        }
    },
    destroyed() {
        $(document.body).unbind('keyup');
        
        window.removeEventListener('scroll',this.onScroll)
    },
    async mounted() {
        $('.bodyView').addClass('info-detail-page');
        if(!localStorage.getItem('WORK-NYD')){
            this.showFnew=true;
        }
        if(!localStorage.getItem('IS-F-WORK-SCROLL')){
            this.isFirstScroll=true;
        }
        if (localStorage.getItem('token')) {
            this.loginUid = localStorage.getItem('userId');
        }
        this.showPage = this.$route.name == 'work'||this.$route.name=='Home';
        if (this.$route.name == 'work')
        {
            // document.body.style.overflow = 'hidden'
            $('.pro-page-bar').remove();
        } 
        if (localStorage.getItem('token')) {
            this.commentParams.currentUserId = localStorage.getItem('userId');
            this.currentUser = JSON.parse(decodeURIComponent(localStorage.getItem('BSIC')));
        }
        if (this.id) {
            this.queryInfo();
        }
        
        window.addEventListener('scroll',this.onScroll)

        let that=this;
        $(document.body).keyup(function (e) {
            if(e.ctrlKey&&e.key==='Enter'){
                that.handleTopSend();
            }
        })
    }
}
</script>


<style scoped lang="less">
.work {
    display: flex;
    position: relative;

    .left-con {
        width: calc(100vw - 366px);
        // max-height: calc(100vh - 45px);
        // overflow-y: auto;
        // overflow-x:hidden;
        padding-right:5px;
        // min-width: 1554px;
        // min-width:calc(100% - 366px);
        // width:calc(100% - 366px);
        position: relative;
        .dx-video-datas {
            margin-top: 10px;
            display: flex;
            flex-direction: column;
            grid-gap:20px;
            margin-bottom:20px;
            align-items: center;
            .dx-vd-item {
                width: 576px !important;
                height: 324px;
                min-width: 576px;
                border-radius: 16px;
                overflow: hidden;
                // margin-right: 20px;
                position: relative;
                animation: opacity .2s ease-in;
                border: 2px solid #515151;
                a {
                    display: inline-block;
                    width: 100%;
                    height: 100%;
                    overflow: hidden;
                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }

                    video {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }

                .play-icon {
                    background: url('../../assets/pro/v_play_big.svg') no-repeat;
                    background-position: center center;
                    background-size: 120px 120px;
                    display: inline-block;
                    left: 0px;
                    top: 0px;
                    right: 0px;
                    bottom: 0px;
                    // width: 120px;
                    // height: 120px;
                    position: absolute;
                    // left: calc((100% - 120px) / 2);
                    // top: calc((100% - 120px) / 2);
                    z-index: 1;
                }
            }
        }

        .imgs {
            width: 100%;

            .img-wrap {
                position: relative;
                // max-width:calc(100vw - 366px);
                margin: 0 auto;
                width: 100%;

                .uimg {
                    position: relative;
                    width: max-content;
                    margin: 0 auto;
                    max-width: calc(100vw - 366px);

                    img {
                        display: block;
                        margin: 0 auto;
                        cursor: zoom-in;
                        // width:100%;
                        // height:100%;
                        // object-fit: cover;
                    }

                    &:hover {
                        .top-funs {
                            visibility: visible;
                        }
                    }

                    &.no-mx-w {
                        width: auto;
                    }
                }
            }
        }

        .top-funs {
            position: absolute;
            top: 20px;
            right: 20px;
            z-index: 103;
            display: flex;
            flex-wrap: wrap;
            transition: .2s all linear;
            visibility: hidden;
            animation: opacity .2s ease-in;

            .full-screen {
                width: 40px;
                height: 40px;
                background: url('../../assets/pro/workinfo/scale.svg') no-repeat;
                background-size: cover;

                &:hover {
                    background: url('../../assets/pro/workinfo/scale_press.svg') no-repeat;
                    background-size: cover;
                }
            }

            .refresh {
                width: 40px;
                height: 40px;
                background: url('../../assets/pro/workinfo/refresh.svg') no-repeat;
                background-size: cover;
                margin: 0px 30px;

                &:hover {
                    background: url('../../assets/pro/workinfo/refresh_press.svg') no-repeat;
                    background-size: cover;
                }
            }

            .download {
                width: 40px;
                height: 40px;
                background: url('../../assets/pro/workinfo/download.svg') no-repeat;
                background-size: cover;

                &:hover {
                    background: url('../../assets/pro/workinfo/download_press.svg') no-repeat;
                    background-size: cover;
                }
            }
        }

        .page-prev {
            width: 50px;
            height: 50px;
            background: url('../../assets/pro/workinfo/page_prev.svg') no-repeat;
            background-size: cover;
            position: fixed;
            top: calc((100vh - 50px) / 2 + (49px / 2));
            left: 20px;

            &:active {
                background: url('../../assets/pro/workinfo/page_prev_press.svg') no-repeat;
                background-size: cover;
            }
        }

        .page-next {
            width: 50px;
            height: 50px;
            background: url('../../assets/pro/workinfo/page_next.svg') no-repeat;
            background-size: cover;
            position: fixed;
            top: calc((100vh - 50px) / 2 + (49px / 2));
            right: 386px;

            &:active {
                background: url('../../assets/pro/workinfo/page_next_press.svg') no-repeat;
                background-size: cover;
            }
        }
    }

    .right-con-box {
        min-width: 366px;
        width: 366px;
        position: sticky;
        right: 0px;
        top:84px;
        height: calc(100vh - 39px);
        background: #171717;
        padding: 30px 17px 70px 17px;
        overflow-y: auto;

        /*滚动条整体部分,必须要设置*/
        &::-webkit-scrollbar {
            width: 3px;
            height: 8px;
            background-color: transparent;
        }

        /*滚动条的轨道*/
        &::-webkit-scrollbar-track {
            background-color: transparent;
        }

        /*滚动条的滑块按钮*/
        &::-webkit-scrollbar-thumb {
            border-radius: 3px;
            background-color: #626262;
        }

        /*滚动条的上下两端的按钮*/
        &::-webkit-scrollbar-button {
            height: 0;
        }

        /* 两个滚动条的交汇处 */
        &::-webkit-scrollbar-corner {
            background-color: transparent;
        }

        .user {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            width: 100%;

            .left {
                display: flex;
                align-items: center;
                max-width: 50%;

                .img-box {
                    width: 50px;
                    height: 50px;
                    min-width: 50px;
                    overflow: hidden;
                    border-radius: 50px;
                    margin-right: 11px;

                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                    &:hover{
                        img{
                            transform: scale(1.08);
                        }
                    }
                }
            }


            .basic {
                width: calc(100% - 61px);

                .top {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                }

                .name {
                    font-size: 16px;
                    line-height: 22px;
                    color: #fff;
                    &:hover{
                        color:#11CCB1;
                        text-decoration: underline;
                    }
                }

                .desc {
                    margin-top: 6px;
                    font-size: 12px;
                    color: #BBBBBB;
                    white-space: nowrap;
                    // max-width:65%;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
            }

            .follow {
                border: 1px solid #484848;
                border-radius: 4px;
                line-height: 22px;
                padding: 0px 7px;
                min-width: 54px;
                text-align: center;
                // margin-right:23px;
                padding-left: 20px;
                user-select: none;
                background: url('../../assets/pro/workinfo/work_follow.svg') no-repeat;
                background-position: 8% center;

                // margin-left:20px;
                &.active {
                    background: url('../../assets/pro/workinfo/work_follow_active.svg') no-repeat;
                    background-position: 8% center;
                }
            }
        }

        .btn-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 14px;
            line-height: 32px;
            margin-top: 24px;
            user-select: none;

            .zan-btn {
                background: #3D3D3D;
                color: #fff;
                border-radius: 6px;
                width: 150px;
                text-align: center;
                background-image: url('../../assets/pro/icon_like2.svg');
                background-repeat: no-repeat;
                background-position: 48px center;
                padding-left: 20px;
                transition: .1s all linear;
                position: relative;
                &:not(.active):hover {
                    background-color: #4f4d4d;
                }

                &.active {
                    background-image: url('../../assets/pro/icon_liked.svg');
                    background-repeat: no-repeat;
                    background-position: 48px center;
                }
            }

            .add-to-collect {
                background: #11CCB1;
                color: #fff;
                border-radius: 6px;
                width: 150px;
                text-align: center;
                transition: .1s all linear;

                &:hover {
                    background: #0fab94;
                }
            }
        }

        .title {
            font-size: 28px;
            line-height: 40px;
            margin-top: 20px;

            .t-tags {
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                margin-left: 5px;
            }

            .tg-img {
                width: 40px;
            }
        }

        .tags {
            line-height: 26px;
            display: flex;
            flex-wrap: wrap;
            margin-top: 17px;
            grid-gap: 10px;

            .tag {
                // margin-right: 10px;
                border-radius: 13px;
                background: #242327;
                font-size: 14px;
                padding: 0px 11px;
                // margin-bottom: 10px;
                color: #BBBBBB;
                transition: .1s all linear;

                &:hover {
                    background: #454545;
                }
            }
        }

        .sub-desc {
            font-size: 14px;
            color: #BBBBBB;
            line-height: 26px;
            margin-top: 20px;
            &.is-mutiple{
                max-height:156px;
                -webkit-line-clamp:6;
                text-overflow: ellipsis;
                overflow: hidden;
                -webkit-box-orient: vertical; 
                display: -webkit-box;
            }
            &.show-more{
                max-height:100%;
                display: inline-block;
            }
        }

        .publish-time {
            color: #BBBBBB;
            font-size: 12px;
            margin-top: 14px;
            display: flex;
            align-items: center;
            justify-content: space-between
        }

        .ico-btns {
            border-top: 1px solid #323232;
            border-bottom: 1px solid #323232;
            padding: 15px 0px;
            display: flex;
            align-items: center;
            font-size: 14px;
            margin-top: 16px;
            >span{
                width:100%;
            }
            a {
                width: 108px;
                padding-left: 27px;
                height: 20px;

                &.comment {
                    background: url('../../assets/pro/workinfo/comment.svg') no-repeat;
                    background-position: 0px center;
                    background-size: 20px 20px;
                    margin-left: 17px;

                    &.active {
                        background: url('../../assets/pro/workinfo/comment_active.svg') no-repeat;
                        background-position: 0px center;
                        background-size: 20px 20px;
                    }
                }

                &.fav {
                    background: url('../../assets/pro/workinfo/fav.svg') no-repeat;
                    background-position: 0px center;
                    background-size: 20px 20px;
                    margin-left: 24px;

                    &.active {
                        background: url('../../assets/pro/workinfo/fav_active.svg') no-repeat;
                        background-position: 0px center;
                        background-size: 20px 20px;
                    }
                }

                &.zan {
                    background: url('../../assets/pro/icon_like2.svg') no-repeat;
                    background-position: 0px center;
                    background-size: 20px 20px;
                    margin-left: 23px;

                    &.active {
                        background: url('../../assets/pro/icon_liked.svg') no-repeat;
                        background-position: 0px center;
                        background-size: 20px 20px;
                    }
                }
            }
        }

        .comment-area {
            margin-top: 0px;
            padding-top: 30px;
            padding-bottom:20px;
            .no-more-text{
                margin-top:20px;
            }
            .send-mbox {
                display: flex;
                align-items: flex-start;
                padding-top: 17px;
                position: fixed;
                // height:70px;
                background: #171717;
                padding-bottom: 10px;
                bottom: 0px;

                .u-img {
                    min-width: 43px;
                    height: 43px;
                    border-radius: 43px;
                    overflow: hidden;
                    margin-right: 12px;

                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }

                .right {
                    width: 281px;
                    position: relative;
                    .el-textarea {
                        textarea {
                            border: 1px solid red;
                        }
                    }

                    input {
                        background: #242327;
                        width: 100%;
                        border: none;
                        border: none;
                        height: 44px;
                        line-height: 44px;
                        padding-left: 16px;
                        font-size: 14px;
                        color: #fff;
                        border-radius: 8px;
                    }

                    textarea {
                        padding-right:100px;
                        width: 400px;
                        margin-left: auto;
                        margin-right: auto;
                        padding: 3px;
                        outline: 0;
                        border: 1px solid #ccc;
                        font-size: 12px;
                        word-wrap: break-word;
                        -webkit-user-modify: read-write-plaintext-only;
                        border-radius: 4px;
                    }

                    .opbtns {
                        position: absolute;
                        right: 1px;
                        display: flex;
                        bottom: 10px;
                        align-items: center;
                        background: #242327;

                        .face-btn {
                            width: 20px;
                            height: 20px;
                            background: url('../../assets/pro/top_cmt_face.svg') no-repeat;
                            background-size: cover;
                            display: flex;
                            align-items: center;
                            margin-right: 13px;

                            &:after {
                                content: '';
                                width: 1px;
                                background: #484848;
                                height: 18px;
                                margin: 0px 13px;
                                position: absolute;
                                left: 20px;
                            }

                            &:hover {
                                background: url('../../assets/pro/top_cmt_face_active.svg') no-repeat;
                                background-size: cover;
                            }
                        }

                        .send-btn {
                            width: 24px;
                            height: 24px;
                            background: url('../../assets/pro/top_cmt_sendbtn.svg') no-repeat;
                            background-size: cover;
                            margin-left: 13px;
                            margin-right: 15px;
                            display: flex;
                        }
                    }
                }
            }
        }

        .tabs {
            font-size: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            // margin-top:36px;
            color: #BBBBBB;

            span {
                cursor: pointer;
                transition: .1s all linear;

                &:first-child {
                    margin-right: 129px;
                }

                &.active {
                    font-weight: 600;
                    color: #fff;
                    font-size: 18px;
                    border-bottom: 1px solid #fff;
                }

                // &:hover{
                //     font-weight:600;
                //     color:#fff;
                //     border-bottom:1px solid #fff;
                // }
            }
        }

        .comments {
            margin-top: 28px;

            // max-height:600px;
            // overflow-y: auto;
            .comment-data-item {
                display: flex;
                align-items: flex-start;
                margin-bottom: 20px;

                .uavatar {
                    width: 34px;
                    height: 34px;
                    min-width: 34px;
                    border-radius: 34px;
                    overflow: hidden;
                    margin-right: 15px;

                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }

                .r-con {
                    background: #202020;
                    border-radius: 8px;
                    padding: 12px 16px;
                    width: 100%;

                    .name {
                        color: #bbb;
                        font-size: 14px;
                        line-height: 20px;

                        &:hover {
                            color: #11CCB1;
                            text-decoration: underline;
                        }

                        i {
                            font-style: normal;
                            margin: 0px 3px;
                            color: #BBBBBB;
                        }
                    }

                    .con-html {
                        margin-top: 6px;
                        margin-bottom: 16px;
                        font-size: 16px;
                    }

                    .bot {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        line-height: 22px;

                        .time {
                            font-size: 12px;
                            color: #6E6D7A;
                        }

                        .funs {
                            display: flex;
                            align-items: center;
                            height: 22px;

                            a {
                                // &:first-child{
                                color: #BBBBBB;
                                font-size: 14px;
                                // }
                            }

                            .del {
                                color: #BBBBBB;
                                font-size: 12px;
                                width: 20px;
                                height: 20px;
                                background: url('../../assets/pro/comment_del.svg') no-repeat;
                                margin-left: 20px;
                                padding-left: 25px;
                                background-position: center;
                                transition: .1s background linear;
                            }

                            .reply {
                                color: #BBBBBB;
                                font-size: 12px;
                                width: 20px;
                                background: url('../../assets/pro/icon_reply.svg') no-repeat;
                                margin-left: 20px;
                                padding-left: 25px;
                                background-position: center;
                                transition: .1s background linear;
                                display:flex;
                            }

                            .cmt-zan {
                                color: #BBBBBB;
                                font-size: 12px;
                                width: 20px;
                                background: url('../../assets/pro/icon_new_like.svg') no-repeat;
                                margin-left: 20px;
                                padding-left: 25px;
                                background-size: 20px;
                                transition: .1s background linear;
                                background-position: center;
                                position: relative;
                                &.active {
                                    background: url('../../assets/pro/icon_liked.svg') no-repeat;
                                    margin-left: 20px;
                                    padding-left: 25px;
                                    background-size: 20px;
                                    background-position:center;
                                }
                            }
                        }
                    }

                    .sub-wrap {
                        margin-top: 16px;

                        .comment-data-item {
                            .uavatar {
                                width: 26px;
                                height: 26px;
                                min-width: 26px;
                            }

                            .r-con {
                                padding: 0px;
                            }
                        }

                        .view-all {
                            text-align: center;

                            .btn {
                                color: #969696;
                                font-size: 12px;
                                background: url('../../assets/pro/more_cmt.svg') no-repeat;
                                background-position: right center;
                                padding-right: 16px;
                            }
                        }
                    }
                }
            }
        }

        .recommends {
            display: flex;
            grid-gap: 12px;
            flex-wrap: wrap;
            margin-top: 28px;

            a {
                min-width: 158px;
                width: 158px;
                border-radius: 16px;
                overflow: hidden;
                position: relative;
                border: 2px solid transparent;
                transition: .2s all linear;
                color: #fff;

                img {
                    width: 158px;
                    height: 158px;
                    display: block;
                    object-fit: cover;
                }

                span {
                    visibility: hidden;
                    position: absolute;
                    bottom: 10px;
                    z-index: 1;
                    font-size: 16px;
                    left: 10px;
                }

                &:hover {
                    border-color:#11CCB1;
                    >img{
                        transform: scale(1.08);
                    }
                    &:after {
                        content: '';
                        position: absolute;
                        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
                        height: 50%;
                        width: 100%;
                        bottom: 0px;
                        left: 0px;
                        right: 0px;
                    }

                    span {
                        visibility: visible;
                    }
                }
            }
        }
    }
}
</style>